Ext.chloroform.ListEditField = Ext.extend(Ext.form.TriggerField, {
    /**
     * @cfg {Ext.data.Store} datastore
     * This data store contains items that can be selected by the user. Each record is a triplet consisting of
     * value, title and description. The data source must define the field vector ['value', 'title', 'description'].
     */
    datastore: null,

    initComponent : function() {
        Ext.get("");
        Ext.chloroform.ListEditField.superclass.initComponent.call(this);
    },

    initEvents: function() {
        Ext.chloroform.ListEditField.superclass.initEvents.call(this);
    },

    getValue : function() {
        return Ext.chloroform.ListEditField.superclass.getValue.call(this);
    },

    setValue : function(val) {
        return Ext.chloroform.ListEditField.superclass.setValue.call(this, val);
    },

    onTriggerClick : function() {
        if (this.disabled) {
            return;
        }

        if (!this.win) {
            var parent = this.findParentByType("window");
            var winMan;
            if (parent) {
                winMan = parent.manager;
            } else {
                winMan = null;
            }

            var _this = this;
            var w = new Ext.Window({
                layout:'fit',
                width:500,
                height:300,
                closeAction:'close',
                plain: true,
                manager: winMan,

                items: [
                    {
                        xtype: 'textarea',
                        name: 'valuesArea',
                        width: 300,
                        //anchor: '100% 100%',
                        hideLabel: true
                    }
                ],

                buttons: [
                    {
                        text:'Store',
                        handler: function() {
                            w.hide();
                            _this.onMenuHide(true);
                        }
                    },
                    {
                        text: 'Close',
                        handler: function() {
                            w.hide();
                            _this.onMenuHide(false);
                        }
                    }
                ]
            });
            this.win = w;
        }

        var curVal = this.getValue();
        if (!Ext.isArray(curVal)) {
            if (curVal == "") {
                curVal = [];
            } else {
                curVal = curVal.split(",");
            }
        }

        // Fill the values text ares by all items.
        var valuesAsLines = "";
        Ext.each(curVal, function(value, index) {
            if (index == 0) {
                valuesAsLines += value;
            } else {
                valuesAsLines += '\n' + value;
            }
        }, this);

        var valuesArea = this.win.find('valuesArea')[0];
        valuesArea.setValue(valuesAsLines);

        this.win.show();
        this.win.toFront();
//        this.win.focus();


//        if (this.menu == null) {
//            var m = new Ext.menu.Menu({
//                style: {
//                    overflow: 'visible'     // For the Combo popup
//                },
//                items: [
//                    {
//                        xtype: 'textarea',
//                        name: 'valuesArea',
//                        width: 300,
//                        //anchor: '100% 100%',
//                        hideLabel: true
//                    }
//                ]
//            });
//
//            var curVal = this.getValue();
//            if (!Ext.isArray(curVal)) {
//                if (curVal == "") {
//                    curVal = [];
//                } else {
//                    curVal = curVal.split(",");
//                }
//            }
//
//            // Fill the values text ares by all items.
//            var valuesAsLines = "";
//            Ext.each(curVal, function(value, index) {
//                valuesAsLines += value + '\n';
//            }, this);
//
//            var valuesArea = m.find('valuesArea')[0];
//            valuesArea.setValue(valuesAsLines);
//
//            this.menu = m;
//            this.menu.on('hide', this.onMenuHide, this);
//
//        }
//
//        this.menu.show(this.el, "tl-bl?");

    },

    validateBlur : function(e) {
        return false;
    },

    onMenuHide: function(store) {
        if (store) {
            var valuesArea = this.win.find('valuesArea')[0];
            var val = valuesArea.getValue();
            val = val.replace(/\n/g, ',');
            this.setValue(val);
            this.fireEvent('select', this, val);
        }
        this.triggerBlur();
    }


});

Ext.reg('listeditfield', Ext.chloroform.ListEditField);
